<template>
    <div class="card-page">
        <div>
            <kv label="上级菜单">
                <menu-ref v-model="$data.pNode"/>
            </kv>
            <kv label="菜单名称">
                <el-input v-model="info.name" chk="*"/>
            </kv>
            <kv label="菜单链接">
                <el-input v-model="info.url"/>
            </kv>
            <kv label="class">
                <el-input v-model="info.css"/>
            </kv>

            <kv label="资源编码">
                <el-input v-model="info.code"/>
            </kv>
            <kv label="排序">
                <el-input v-model="info.sort"/>
            </kv>
        </div>
        <el-button size="small" @click="save_click" type="primary" style="display: block;margin:auto;"> 保存</el-button>
    </div>
</template>

<script setup>
import menuRef from "./admin-menu-ref.vue"



//定义 vue2的this,当前组件
const $self = getCurrentInstance();

//定义 $attrs
const $attrs = useAttrs()

//定义属性
const $props = defineProps({
    id: { type: String },
    pNode: {
        type: Object, default: function () {
            return {}
        }
    }
});


const $data = reactive({
  pNode: {}
});

watch(() => $props.pNode, v => {
  $data.pNode = v
},{immediate: true});


const info = defineModel({ type:  Object });

const action_name = $computed(()=>{
    return {add: "添加", edit: "修改"}[ (info.id ? "edit": "add")]
})

//定义事件
const $emit = defineEmits(["update:modelValue","done","update:pNode"]);


const save_click = function () {
    var data = Object.assign({}, info.value);
    jv.$http.post("/admin/admin-menu/save?pid=" + ($data.pNode.id || ""), data ).then(res => {
        //[axios拦截器中已处理了异常]。
        jv.info(action_name + " 成功");
        $emit("done", data)
    })
}
</script>
